<template>
	<view class="content">
		<image src="../../../../static/loupan_item2.png" mode="widthFix"></image>
		<view class="header header-more">
			<view class="horizontal">
				<view class="line"></view>
				<view class="header-title">施工现场</view>
			</view>
			<image class="share-image" src="../../../../static/share.png" mode="widthFix"></image>
		</view>
		<view class="list">
			<view class="item">
				<image src="../../../../static/loupan_details_item1.png" mode="widthFix"></image>
				<view class="title">书房</view>
			</view>
			<view class="item">
				<image src="../../../../static/loupan_details_item2.png" mode="widthFix"></image>
				<view class="title">客厅</view>
			</view>
			<view class="item">
				<image src="../../../../static/loupan_details_item2.png" mode="widthFix"></image>
				<view class="title">客厅</view>
			</view>
		</view>
		<view class="btn" hover-class="btn-hover" type="default" size="mini" @click="isShowConfirm = true">预约</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="less">
.content {
	display: flex;
	flex-direction: column;

	.header {
		margin: 40rpx 40rpx 0rpx 40rpx;
	}

	.header-title {
		font-size: 28rpx;
		margin-left: 20rpx;
	}
	.share-image {
		width: 32rpx;
	}

	.list {
		display: flex;
		flex-direction: column;
		box-sizing: content-box;

		.item {
			margin: 20rpx 40rpx 0rpx 40rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);

			image {
				border-radius: 12rpx 12rpx 0rpx 0rpx;
			}

			.title {
				text-align: center;
				padding: 20rpx 0;
				font-size: 24rpx;
			}

			.title::after {
				content: ' —';
				color: #3d9c36;
			}

			.title::before {
				content: '— ';
				color: #3d9c36;
			}
		}
	}
}
</style>
